<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org" >  <!-- thymeleaf追加 -->
<head>
  <meta charset="utf-8">
  <title>layuiAdmin 后台管理员</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  <!-- vue追加 -->
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>		<!-- vue的AJAX追加 -->
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="../../../layuiadmin/style/admin.css" media="all">  <!-- layui格式使用 -->
  <!-- 自用js函数始 -->
     
  <!-- 自用js函数末 -->
</head>
<body>
	<!-- 工作区域始 --> <!-- 药物管理界面 -->
<div class="layui-fluid">
   <div class="layui-row layui-col-space15">
     <div class="layui-col-md12">
       <div class="layui-card">
        
        
        <!-- 展示 -->
		  <div id="app"> <!-- vue -->
        
          <div class="layui-card-header">请输入购入药房的名字</div>
          <div class="layui-card-body layui-row layui-col-space10">
          
            <div class="layui-col-md2">
              <input  v-model="pharId"  type="text" name="title" placeholder="请输入购入药房编号" autocomplete="off" class="layui-input">
            </div>
            
 			<div class="layui-btn-container">
              <input type="button" value="结算"  @click="create"  class="layui-btn layui-btn-primary">
            </div>         

	  
		  <div class="layui-card-header">订单展示</div>
          <div class="layui-card-body">
            
         	<div class="layui-btn-container">
              <input type="button" value="安全验证"  @click="initCart"  class="layui-btn layui-btn-primary">
            </div>  
               
        <table border="1" class="layui-table">
        	<tr>
        		<td>预选编号&nbsp&nbsp&nbsp&nbsp&nbsp</td>
        		<td>药品编号&nbsp&nbsp&nbsp&nbsp&nbsp</td>
        		<td>药品名字&nbsp&nbsp&nbsp&nbsp&nbsp</td>
        		<td>药品成本&nbsp&nbsp&nbsp&nbsp&nbsp</td>
        		<td>药物数量&nbsp&nbsp&nbsp&nbsp&nbsp</td>
        		<td>价格小计&nbsp&nbsp&nbsp&nbsp&nbsp</td>
        		<td>药品厂商&nbsp&nbsp&nbsp&nbsp&nbsp</td>       		
        	</tr>
        	<tr v-for="cart in list" >
        		<td>{{cart.cartId}}</td>
        		<td>{{cart.mediId}}</td>
        		<td>{{cart.mediName}}</td>
        		<td>{{cart.mediCost}}</td>
        		<td> 
        		<a :href="'http://localhost:8080/declineCart?mediId='+cart.mediId"><button  class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon">&#xe603;</i></button></a> 
        		{{cart.mediAmount}}
        		<a  :href="'http://localhost:8080/incrementCart?mediId='+cart.mediId"><button   class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon">&#xe602;</i></button></a> 
        		</td>
        		<td>{{cart.subtotal}}</td>
        		<td>{{cart.manuName}}</td>
        	</tr>  
        	
        	       
        </table>  
  
          </div>
           </div>  
           
                     
          </div> <!-- /vue -->
          <!-- /展示 -->
              
        
         </div>
       </div>
      </div>
     </div>
<!-- 工作区域末 -->
<!-- vue -->
    <script>  		      
        var app = new Vue({
            el:"#app",
            data:{
            	cartId: "",
            	mediId: "",
            	mediName: "",
            	mediCost: "",
            	mediAmount: "",
            	manuName: "",
            	subtotal: "",
            	pharId:"",
                list:[]
            },
            methods:{
               
                initCart:function(){ 
                    //ajax for axios
                    var that=this;
                    axios.get("http://localhost:8080/initCart")
                    .then(function(d){
                        that.list=d.data.data
                        
                    });
                 }, 
                 
                 create:function(){ 
                     //ajax for axios
                     var that=this;
                     axios.get("http://localhost:8080/create?pharId="+this.pharId)
                     .then(function(d){
                         that.list=d.data.data
                         alert(d.data.msg)
                     });
                  }
            }
        });     
    </script>
<!-- vue -->
 <script src="../../../layuiadmin/layui/layui.js"></script>  <!-- layui基础script -->
 <script>
 layui.config({
	    base: '../../../layuiadmin/' //静态资源所在路径
	  }).extend({
	    index: 'lib/index' //主入口模块
	  }).use(['index', 'table'], function(){
	    var table = layui.table;
	  

	  
	  });
</script>  <!-- leyui基础function -->
</body>
</html>